<template>
    <div ref="controls">
        <div id="kkkk"></div>
    </div>
</template>

<script setup>
import * as THREE from 'three'
import { OrbitControls } from 'three/addons/controls/OrbitControls.js'

// 创建场景
const scene = new THREE.Scene();
// 创建相机
const camera = new THREE.PerspectiveCamera();
camera.position.y = 5; 
camera.position.z = 10; 
// 创建立方体
const geometry = new THREE.BoxGeometry(1, 1, 1);
const material = new THREE.MeshBasicMaterial({ color: 0x00ff00 });
// 网格
const cube = new THREE.Mesh(geometry, material);
cube.position.set(0,3,0);
scene.add(cube);
// 添加网络地面 
const gridHelper = new THREE.GridHelper(10, 10);
scene.add(gridHelper);
// 创建渲染器
const renderer = new THREE.WebGL1Renderer();
renderer.setSize(window.innerWidth, window.innerHeight - 110);
// 将渲染器添加到页面
// document.body.appendChild(renderer.domElement);
this.$refs.renderer.appendChild(renderer.domElement)
// const controlsEle = document.getElementById('kkk');
// console.log(controlsEle);
// console.log('123')
// controlsEle.appendChild(renderer.domElement);

// 添加轨道控制器
const controls = new OrbitControls(camera, renderer.domElement);
// 对轨道控制器改变时候进行监听
controls.addEventListener('change', function(){
    console.log("触发change")
});
// 添加阻尼的效果
controls.enableDamping = true;
controls.dampingFactor = 0.05;
// 围绕目标自动旋转
controls.autoRotate = true;
controls.autoRotateSpeed = 1;

// 进行渲染
renderer.render(scene, camera);
function animate(){
    requestAnimationFrame(animate);
    controls.update();
    renderer.render(scene, camera);
}
// 调用
animate();

</script>

<style>

</style>